<template>
  <!-- 新增机构 / 编辑机构 -->
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    :title="id ? '编辑机构' : '新增机构'"
    width="60%"
    :maskClosable="false"
    destroyOnClose
    @ok="handleOk"
    @close="handleClose"
  >
    <Tabs v-model:activeKey="activeKey">
      <TabPane :key="0" tab="基本资料">
        <BasicsInfo :info="info" @next-step="nextStep" />
      </TabPane>
      <TabPane :key="1" tab="数据库设置" :disabled="disabled">
        <DatabaseConfig />
      </TabPane>
      <TabPane :key="2" tab="账户设置" :disabled="disabled">
        <UserConfig />
      </TabPane>
      <TabPane :key="3" tab="分润配置" :disabled="disabled">
        <ProfitConfig />
      </TabPane>
      <TabPane :key="4" tab="权限配置" :disabled="disabled">
        <AuthConfig />
      </TabPane>
      <!-- <TabPane :key="5" tab="其他" :disabled="disabled"> 其他 </TabPane> -->
    </Tabs>
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { computed, ref, provide } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { Tabs, TabPane } from 'ant-design-vue';
  import BasicsInfo from './model/basicsInfo.vue';
  import DatabaseConfig from './model/databaseConfig.vue';
  import UserConfig from './model/userConfig.vue';
  import ProfitConfig from './model/profitConfig.vue';
  import AuthConfig from './model/authConfig.vue';
  // import Editor from './model/editor.vue';
  import { configDetails } from '@/api/institution/list';

  const emit = defineEmits(['reload']);

  const activeKey = ref(0);

  const id = ref<string | number>();
  const info = ref();
  const disabled = computed(() => !id.value);
  const load = ref(false);
  const handleOk = () => {};
  const [register] = useDrawerInner(async (data) => {
    id.value = data.id;
    info.value = null;
    if (data.id) {
      let res = await configDetails(data.id);
      info.value = res;
      load.value = true;
    } else {
      load.value = true;
    }
  });

  const nextStep = (key: number, addId?: number | string) => {
    if (addId) {
      id.value = addId;
    }
    activeKey.value = key;
  };

  const handleClose = () => {
    id.value = void 0;
    activeKey.value = 0;
    emit('reload');
    load.value = false;
  };

  provide('dataId', id);
</script>

<style scoped></style>
